<script setup>
import { ref, reactive, watch } from "vue";
import { onLoad, onShow, onReachBottom } from "@dcloudio/uni-app";
import { goTo } from "../../../hooks/useNavigator"
import { request } from "../../../common/http"
import { ApiUrl } from "../../../common/ApiUrl"
import NumberTool from "../../components/NumberTool.vue"

let stock = ref(0);
let machineChannelList = ref([]);
// 是否打开选择商品弹窗
let showSelectGoodsPopup = ref(false);
// 是否显示商品来源弹窗
let showGoodsFromPopup = ref(false);
// 商品名称搜索框关键字
let keyword = ref("");
let page = ref(1);
let index = ref(0);
let categoryTypeList = reactive([
	[
		{
			text: "平台商品库",
			value: 1,
		},
		{
			text: "商家自建库",
			value: 2,
		}
	]
])
let name = ref("商家自建库");
let categoryType = ref(2);
// 当前选择的商品
let goods = ref({
	keyword: "",
	categoryType: 2,
	categoryId: null,
	pageNum: 1,
	pageSize: 50,
});
// 商品列表
let goodsList = ref([]);
let changed = ref([]);
let state = reactive({
	machineId: null,
	currentMachine: {},
})
let goodsThead = ref([
	"",
	"产品图片",
	"产品名称",
	"分类名称"
]);

onLoad((options) => {
	state.machineId = options.machineId;
})

onShow(() => {
	// 获取当前的设备
	getCurrentMachine();
	// 货道列表
	getMachinechannelList();
})

// 选择商品
const handleSelect = (item) => {
	goods.value = Object.assign(goods.value, item);
	showSelectGoodsPopup.value = true;
	page.value = 1;
	index.value = 0;
	goodsList.value = [];
	changed.value = [];
	getGoodsList();
}

// 获取当前的设备
const getCurrentMachine = () => {
	request({
		url: `${ApiUrl.MachineUrl}/get/${state.machineId}`,
		method: 'get',
		data: {}
	}).then(res => {
		state.currentMachine = res.data;
	})
}

// 获取当前的设备列表
const getMachinechannelList = () => {
	request({
		url: `${ApiUrl.MachineChannelUrl}/getCount`,
		method: 'post',
		data: {
			machineId: state.machineId
		}
	}).then(res => {
		machineChannelList.value = res.data;
	})
}

// 获取商品列表
const getGoodsList = () => {
	goods.value.keyword = keyword.value;
	goods.value.categoryType = categoryType.value;
	goods.value.categoryId = null;
	goods.value.pageNum = page.value;
	goods.value.pageSize = 50;
	request({
		url: `${ApiUrl.GoodsUrl}/list`,
		method: 'post',
		data: {
			...goods.value
		}
	}).then(res => {
		if (res.status == 0) {
			const list = res.data.list;
			list.forEach((item, i) => {
				index.value ++;
				changed.value.push(false);
			});
			goodsList.value = goodsList.value.concat(list)
			// this.query.pageCount = data.data.pages;
		}
	})
}

const handleGoodsItem = (item, num) => {
	for (let i = 0; i < index.value; i++) {
	  if (num == i) {
	    if (!changed.value[num]) {
	      changed.value[num] = true;
	    } else {
	      changed.value[num] = false;
	      // 没选中时赋值会默认值
	      goods.value.name = item.name;
	      goods.value.id = item.id;
	      goods.value.image = item.image;
				// machineChannelList.value[num].image = item.image;
	      goods.value.costPrice = item.costPrice;
	      goods.value.salePrice = item.salePrice;
	      goods.value.promotePrice = item.promotePrice;
	      goods.value.stock = item.stock;
				console.log("goods.value", goods.value);
	    }
	  } else {
	    changed.value[i] = false;
	  }
	}
}
// 商品来源弹窗确认按钮点击事件
const handleGoodsFromConfirm = (e) => {
	const item = e.value[0];
	name.value = item.text;
	categoryType.value = item.value;
	goodsList.value = [];
	showGoodsFromPopup.value = false;
	getGoodsList();
}

// 商品名称搜索事件
const handleSearch = () => {
	goodsList.value = [];
	getGoodsList();
}

watch(() => keyword.value, (val) => {
	if (!val) {
		goodsList.value = [];
		goods.value.pageNum = 1;
		getGoodsList();
	}
})
</script>

<template>
	<view class="restock_wrap">
		<block v-if="machineChannelList.length > 0">
			<view class="current_tip">
				当前设备：{{ state.currentMachine?.machineNo }}
				<text v-if="state.currentMachine?.area">（{{ state.currentMachine?.area }}）</text>
			</view>
			<view class="quick">
				<view>一键补满</view>
				<view>保存</view>
			</view>
			<view class="machine_list">
				<view class="machine_item" v-for="item in machineChannelList" :key="item.id">
					<view class="top">
						<view class="left" @click="handleSelect(item)">
							<text>货道{{ item.channelIndex }}</text>
							<image :src="item.image" mode="aspectFill"></image>
						</view>
						<view class="right">
							<view class="goods">{{ item.name }}</view>
							<view class="detail">
								<view class="detail_left">
									<view class="detail_item">成本价: {{ item.costPrice }}元</view>
									<view class="detail_item">促销价: {{ item.promotePrice }}元</view>
									<view class="detail_item">库存量: {{ item.fullStock }}</view>
								</view>
								<view class="detail_right">
									<view class="detail_item">销售价: {{ item.salePrice }}元</view>
									<view class="number">
										<text>库存</text>
										<image src="/static/image/icon/icon_sub.png" mode="aspectFill"></image>
										<input v-model="item.fullStock" type="number" />
										<image src="/static/image/icon/icon_increment.png" mode="aspectFill"></image>
									</view>
									<view class="number stock">
										<text>预警</text>
										<image src="/static/image/icon/icon_sub.png" mode="aspectFill"></image>
										<input v-model="item.stock" type="number" />
										<image src="/static/image/icon/icon_increment.png" mode="aspectFill"></image>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="bottom">
						<view>下架</view>
						<view>上架</view>
					</view>
				</view>
			</view>
			<view class="operation">
				<view @click="goTo('/pages/index/ProductManager/Add')">保存</view>
				<view >重置货道</view>
			</view>
		</block>
		<view v-else class="no_data">暂无数据</view>
		<!-- 选择商品弹窗 -->
		<u-popup :show="showSelectGoodsPopup" mode="center" :round="16">
			<view class="select_goods_popup">
				<view class="title">选择商品</view>
				<view class="goods_from" @click="showGoodsFromPopup = true">
					<view class="label">商品来源</view>
					<view class="content">
						{{ name }}
						<image src="/static/image/icon/icon_arrow_right.png" mode="aspectFill"></image>
					</view>
				</view>
				<view class="goods_search">
					<image src="/static/image/navbar/search.png"></image>
					<input v-model.trim="keyword" type="text" placeholder="请输入商品名称" @confirm="handleSearch" />
				</view>
				<view class="thead">
					<text :class="[`thead${i + 1}`]" v-for="(item, i) in goodsThead" :key="i">{{ item }}</text>
				</view>
				<view class="tbody">
					<view class="tbody_list" v-for="(item, i) in goodsList" :key="item.id" @click="handleGoodsItem(item, i)">
						<view class="checked">
							<image v-if="changed[i]" src="/static/image/user/checked.png" mode="aspectFill"></image>
							<image v-else src="/static/image/user/check.png" mode="aspectFill"></image>
						</view>
						<view class="goods_img">
							<image :src="`${ApiUrl.ImageUrl}/${item.image}`" mode="aspectFill"></image>
						</view>
						<view class="name">{{ item.name }}</view>
						<view class="category">{{ item.goodsCategory.name }}</view>
					</view>
				</view>
				<view class="footer">
					<view @click="showSelectGoodsPopup = false">取消</view>
					<view @click="showSelectGoodsPopup = false">确定</view>
				</view>
			</view>
		</u-popup>
		<!-- 商品来源弹窗 -->
		<u-picker
			:show="showGoodsFromPopup"
			:columns="categoryTypeList"
			@cancel="showGoodsFromPopup = false"
			@confirm="handleGoodsFromConfirm" />
	</view>
</template>

<style lang='scss'>
.restock_wrap {
	position: relative;
	.current_tip {
		width: 100%;
		padding: 24rpx 40rpx;
		font-size: 24rpx;
		color: #FF6619;
		background: #FFEFE6;
		box-sizing: border-box;
	}
	.quick {
		padding: 16rpx 0;
		display: flex;
		justify-content: center;
		view {
			width: 152rpx;
			height: 64rpx;
			border-radius: 32rpx;
			border: 2rpx solid #FF776A;
			font-size: 28rpx;
			color: #FF4638;
			line-height: 33rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			&:last-child {
				margin-left: 112rpx;
				background: linear-gradient( 129deg, #FF776A 0%, #FF4638 100%);
				color: #ffffff;
			}
		}
	}
	.machine_list {
		box-sizing: border-box;
		padding-bottom: 286rpx;
		.machine_item {
			width: 686rpx;
			background: #ffffff;
			border-radius: 24rpx;
			box-sizing: border-box;
			padding: 28rpx 28rpx 24rpx;
			margin: 0 auto 24rpx;
			.top {
				display: flex;
				.left {
					width: 164rpx;
					height: 234rpx;
					background: linear-gradient( 90deg, #FF766C 0%, #FF4638 100%);
					border-radius: 16rpx;
					text {
						width: 100%;
						display: block;
						font-size: 24rpx;
						color: #ffffff;
						text-align: center;
						line-height: 36rpx;
						padding: 10rpx 0 4rpx;
					}
				}
				.right {
					margin-left: 16rpx;
					.goods {
						font-weight: 500;
						font-size: 30rpx;
						color: #1A1A1A;
						line-height: 35rpx;
					}
					.detail {
						display: flex;
						.detail_item {
							font-size: 24rpx;
							color: #999999;
							line-height: 28rpx;
							margin-top: 16rpx;
						}
						.detail_left {
							.detail_item {
								width: 218rpx;
							}
						}
						.detail_right {
							.number {
								display: flex;
								align-items: center;
								margin-top: 6rpx;
								&.stock {
									margin-top: 0;
								}
								text {
									font-weight: 500;
									font-size: 24rpx;
									color: #1A1A1A;
									line-height: 28rpx;
									margin-right: 16rpx;
								}
								image {
									width: 32rpx;
									height: 32rpx;
								}
								input {
									width: 60rpx;
									box-sizing: border-box;
									padding: 0 10rpx;
									font-weight: 500;
									font-size: 24rpx;
									color: #1A1A1A;
									text-align: center;
									display: flex;
									align-items: center;
									justify-content: center;
								}
							}
						}
					}
				}
			}
			.bottom {
				padding-right: 36rpx;
				display: flex;
				justify-content: flex-end;
				view {
					width: 120rpx;
					height: 58rpx;
					background: #F7F7F7;
					border-radius: 30rpx 30rpx 30rpx 30rpx;
					font-size: 24rpx;
					color: #1A1A1A;
					line-height: 28rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					&:last-child {
						background-color: rgba(#FF4638, 0.1);
						color: #FF4638;
						margin-left: 24rpx;
					}
				}
			}
		}
	}
	.operation {
	  background: #f5f5f5;
		box-sizing: border-box;
	  padding: 10rpx 32rpx 92rpx;
	  position: fixed;
		z-index: 99;
	  bottom: 0;
	  width: 100%;
	  view {
			box-sizing: border-box;
	    width: 686rpx;
	    height: 80rpx;
	    border-radius: 40rpx;
	    border: 2rpx solid #FF776A;
			font-size: 28rpx;
			color: #FF4638;
			line-height: 33rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			&:nth-child(1) {
				background: linear-gradient( 90deg, #FF766C 0%, #FF4638 100%);
				border: unset;
				color: #ffffff;
				margin-bottom: 24rpx;
			}
	  }
	}
	.no_data {
		font-size: 24rpx;
		color: #969699;
		text-align: center;
		margin-top: 30rpx;
	}
	.select_goods_popup {
		width: 680rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		box-sizing: border-box;
		padding: 40rpx 0 0;
		.title {
			font-weight: 500;
			font-size: 32rpx;
			line-height: 38rpx;
			color: #353535;
			letter-spacing: 1px;
			text-align: center;
			margin-bottom: 22rpx;
		}
		.goods_from {
			width: 100%;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 28rpx;
			box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EBEEF1;
			.label {
				font-weight: 500;
				font-size: 28rpx;
				color: #3B3D3D;
				line-height: 33rpx;
				margin-right: 28rpx;
			}
			.content {
				display: flex;
				flex: 1;
				align-items: center;
				justify-content: flex-end;
				color: #B6BDBD;
				font-size: 28rpx;
				image {
					flex-shrink: 0;
					width: 32rpx;
					height: 32rpx;
					margin-left: 12rpx;
				}
			}
		}
		.goods_search {
			width: 508rpx;
			position: relative;
			box-sizing: border-box;
			margin: 28rpx auto;
			image {
				position: absolute;
				top: 50%;
				left: 20rpx;
				transform: translateY(-50%);
				flex-shrink: 0;
				width: 40rpx;
				height: 40rpx;
			}
			input {
				width: 508rpx;
				height: 64rpx;
				background: #F2F2F2;
				border-radius: 32rpx;
				padding: 0 20rpx 0 80rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				font-size: 24rpx;
			}
		}
		.thead {
			width: 100%;
			height: 64rpx;
			background: #FF766C;
			display: flex;
			box-sizing: border-box;
			padding: 18rpx 0;
			text {
				width: 25%;
				font-weight: 500;
				font-size: 20rpx;
				color: #ffffff;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
				&:not(:last-child) {
					border-right: 4rpx solid #FFE5E5;
				}
			}
		}
		.tbody {
			width: 100%;
			max-height: 400rpx;
			overflow-y: scroll;
			.tbody_list {
				width: 100%;
				min-height: 64rpx;
				background: #FFFFFF;
				font-size: 20rpx;
				color: #3B3D3D;
				box-sizing: border-box;
				display: flex;
				padding: 15rpx 0;
				&:nth-child(odd) {
					background: #FFF3F2;
				}
				.checked {
					width: 25%;
					display: flex;
					align-items: center;
					justify-content: center;
					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
				.goods_img {
					width: 25%;
					display: flex;
					align-items: center;
					justify-content: center;
					image {
						width: 90%;
						height: 140rpx;
					}
				}
				.name,
				.category {
					width: 25%;
					box-sizing: border-box;
					padding: 0 10rpx;
					text-align: center;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
		.footer {
			width: 100%;
			height: 112rpx;
			border-top: 2rpx solid rgba(0, 0, 0, 0.1);
			display: flex;
			align-items: center;
			view {
				height: 100%;
				flex: 1;
				font-weight: 500;
				font-size: 32rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
				&:last-child {
					color: #FF4638;
					border-left: 2rpx solid rgba(0, 0, 0, 0.1);
				}
			}
		}
	}
}
</style>